<extend name="Common/base"/>
<block name="content">
    <div class="container">
        <div class="fixedit">
            <i style="font-size:40px;color:#4bb777;" class="fa fa-envira"></i>
            <span>教学环境评价</span>
            <hr class="hr" />
        </div>

        <form action="" method="post" class="addAppraise">
            <div class="grade">
                <label >实验室卫生</label>
                <span  onmouseover="grade(this)">
      <input type="text" name="health" value="" style="display: none;">
      <i class="fa fa-star-o fa-lg"></i>
      <i class="fa fa-star-o fa-lg"></i>
      <i class="fa fa-star-o fa-lg"></i>
      <i class="fa fa-star-o fa-lg"></i>
      <i class="fa fa-star-o fa-lg"></i>
    </span>
            </div>
            <div class="grade">
                <label>实验员态度</label>

                <span  onmouseover="grade(this)">
       <input type="text" name="attitude" value=""  style="display: none;">
      <i class="fa fa-star-o fa-lg"></i>
      <i class="fa fa-star-o fa-lg"></i>
      <i class="fa fa-star-o fa-lg"></i>
      <i class="fa fa-star-o fa-lg"></i>
      <i class="fa fa-star-o fa-lg"></i>
    </span>
            </div>
            <div class="grade">
                <label>实验室设备</label>

                <span  onmouseover="grade(this)">
       <input type="text" name="equip" value=""  style="display: none;">
                    <!-- smallT change *3 -->
      <i class="fa fa-star-o fa-lg"></i>
      <i class="fa fa-star-o fa-lg"></i>
      <i class="fa fa-star-o fa-lg"></i>
      <i class="fa fa-star-o fa-lg"></i>
      <i class="fa fa-star-o fa-lg"></i>
                    <!--  -->
    </span>
            </div>
            <textarea  placeholder="请输入评价内容"> </textarea>
            <button type="submit" class="btn allbutton">提交</button>
        </form>
    </div>
    </block>
<block name="foot_js">
    <script type="text/javascript">
        function grade(span){
            var num=finalnum = tempnum= 0;
            var lis= span.getElementsByTagName('i');
            tempnum=span.children[0].value;


            //num:传入点亮星星的个数
            //finalnum:最终点亮星星的个数
            //tempnum:一个中间值
            function fnShow(num) {
                finalnum= num || tempnum;//如果传入的num为0，则finalnum取tempnum的值
                for (var i = 0; i < lis.length; i++) {
                    // smallT change
                    lis[i].className= i < finalnum? "fa fa-star fa-lg":"fa fa-star-o fa-lg";//点亮星星
                    //
                }
            }

            for (var i = 1; i <= lis.length; i++) {
                lis[i - 1].index = i;
                lis[i - 1].onmouseover = function() { //鼠标经过点亮星星。
                    fnShow(this.index);//传入的值为正，就是finalnum
                }
                lis[i - 1].onmouseout = function() { //鼠标离开时星星变暗
                    fnShow(0);//传入值为0，finalnum为tempnum,初始为0
                }
                lis[i - 1].onclick = function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星
                    tempnum= this.index;
                    span.children[0].value=tempnum;

                }
            }
        }
    </script>
</block>
<block name="header_js">
    <!--导航变色-->
    <script>
        var nav=document.getElementsByClassName('nav')[0].getElementsByTagName('a');
        nav[6].className='active';
    </script>
</block>